<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户分页</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>用户列表</h1>
    <div id="user-list"></div>
    <div id="pagination">
        <button id="prev-page">上一页</button>
        <span id="current-page">1</span>
        <button id="next-page">下一页</button>
    </div>

    <script>
        let currentPage = 1;
        const pageSize = 2; // 每页显示的记录数

        function loadUsers(page) {
        	//`:js中的模板引号，可以传入变量
            $.get(`/my/getUserByPage?page=${currentPage}&size=${pageSize}`, function(response) {
            	/* // 判断返回的数据类型
                if (typeof response === 'string') {
                    // 如果返回的是字符串，显示提示信息
                    alert(response);
                } else {
                	const current=$('#current-page');
                	current.empty();
                	current.append(currentPage);
                	const userList = $('#user-list');
                	userList.empty(); // 清空当前内容
                    // 如果返回的是用户数据，展示用户列表
                    response.forEach(function(user) {
                        const userDiv = $('<div></div>');
                        userDiv.text(`ID: ${user.id}, Username: ${user.username}`);
                        userList.append(userDiv);
                    });
                } */
                if(response.msg==="已经是最后一条数据了...")
                	alert(response.msg);
                else{
                	const current=$('#current-page');
                	current.empty();
                	current.append(currentPage);
                	const userList = $('#user-list');
                	userList.empty(); // 清空当前内容
                	var data=response.data;
                	data.forEach(function(user){
                		const userDiv = $('<div></div>');
                        userDiv.text(`ID: ${user.id}, Username: ${user.username}`);
                        userList.append(userDiv);
                	})
                }
            });
        }

        $('#prev-page').click(function() {
        	if(currentPage==1)
        		alert("已经是第一条数据了...");
            if (currentPage > 1) {
                currentPage--;
                loadUsers(currentPage);
            }
        });

        $('#next-page').click(function() {
            currentPage++;
            loadUsers(currentPage);
        });

        // 初始化加载第一页数据
        loadUsers(currentPage);
    </script>
</body>
</html>